<template>
  <div :class="{'dragged-plan': data.length > 0}">
    <el-table 
      v-bind="getTableProps()"
      :data="data" 
      border
      row-key="id"
      tooltip-effect="dark" 
      :empty-text="$t(`train['暂无训练方式']`)">
      <el-table-column 
        prop="trainingDuration"
        :label="$t(`train['训练时长']`)" 
        width="80"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.trainingDuration }}分钟
        </template>
      </el-table-column>
      <el-table-column 
        prop="trainingName"
        :label="$t(`train['训练方式名称']`)" 
        width="250"
        :show-overflow-tooltip="true"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.trainingName }}
        </template>
      </el-table-column>
      <el-table-column 
        prop="trainingAim"
        :label="$t(`train['训练目标']`)" 
        :width="$route.query.type != TYPE_ENUM.PREVIEW ? 322 : 382">
        <template slot-scope="scope">
          {{ scope.row.trainingAim }}
        </template>
      </el-table-column>
      <el-table-column 
        prop="imageUrls"
        :label="$t(`train['训练图示']`)" 
        align="center" 
        width="120">
        <template slot-scope="scope">
          <e-preview-box v-if="scope.row.imageUrls && scope.row.imageUrls.length > 0">
            <e-swiper
              height="120px"
              :slides="1">
              <e-swiper-item v-for="(item, index) in scope.row.imageUrls" :key="index">
                <img class="carousel-img" v-bind:src="item">
              </e-swiper-item>
            </e-swiper>
          </e-preview-box>
          <div v-else style="height:120px;line-height:120px;">{{$t(`train['暂无图示']`)}}</div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('操作')" 
        width="60"
        v-if="$route.query.type != TYPE_ENUM.PREVIEW"
        align="center">
        <template slot-scope="scope">
          <el-button class="locale-btn" type="link" @click="handleUp(scope.$index)" v-if="scope.$index > 0 && [TYPE_ENUM.DETAIL, TYPE_ENUM.EDIT].includes($route.query.type)">{{$t('上移')}}</el-button>
          <el-button class="locale-btn" type="link" @click="handleDown(scope.$index)" v-if="scope.$index < data.length - 1 && [TYPE_ENUM.DETAIL, TYPE_ENUM.EDIT].includes($route.query.type)">{{$t('下移')}}</el-button>
          <el-button type="link" @click="handleDetail(scope.row)">{{$t('详情')}}</el-button>
          <el-button type="link" @click="handleDelete(scope.$index)" v-if="[TYPE_ENUM.DETAIL, TYPE_ENUM.EDIT].includes($route.query.type)">{{$t('移除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-bind="getPaginationProps(data)"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      >
    </el-pagination>
  </div>
</template>

<script>
import { pagingList } from 'utils/mixins'
import {ESwiper, ESwiperItem} from '@e-ui/swiper'
import { TYPE_ENUM } from '../constant'

export default {
  mixins: [pagingList],
  props: {
    data: Array
  },
  components: {
    ESwiper,
    ESwiperItem
  },
  data () {
    return {
      TYPE_ENUM
    }
  },
  methods: {
    handleDetail (row) {
      this.$emit('detail', row)
    },
    handleDelete (index) {
      this.$emit('delete', index)
    },
    handleUp (index) {
      this.$emit('up', index)
    },
    handleDown (index) {
      this.$emit('down', index)
    }
  }
}
</script>

<style lang="scss">
  .dragged-plan {
    width:100%;
    border-left:1px solid #f2f2f2;
    .swiper-nav {
      display: none;
    }
    .locale-btn{
      white-space: normal;
    }
  }
</style>
